<template>
  <div class="box">

    <div class="line">
      <div class="itemBox titleItem">
        <el-checkbox v-model="this.isKeySelected.title" @change="handleChange($event, 'title')">标题</el-checkbox>
        <el-form-item v-if="this.isKeySelected.title" :model="form">
          <el-input class="itemInput" v-model="form.title" placeholder="请输入需要查找的标题" />
        </el-form-item>
      </div>
      <div class="itemBox flowerUserIdItem">
        <el-checkbox v-model="this.isKeySelected.flowerUserId" @change="handleChange($event, 'flowerUserId')">用户ID</el-checkbox>
        <el-form-item v-if="this.isKeySelected.flowerUserId" :model="form">
          <el-input class="itemInput" v-model="form.flowerUserId" placeholder="请输入需要查找的作者ID" />
        </el-form-item>
      </div>
    </div>

    <div class="line">
      <div class="sortSwitch">
        <el-switch v-model="form.order" active-value="DESC" inactive-value="ASC"
          style="--el-switch-on-color: #2a5caa; --el-switch-off-color: #ef4136" active-text="降序" inactive-text="升序" />
      </div>
      <div class="column">
        <el-select v-model="form.column" placeholder="排序键">
          <el-option v-for="item in column" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <el-button color="#009ad6" @click="searchArticle">搜索</el-button>
      <el-button color="#009ad6" plain @click="resettingSearch">重置</el-button>
    </div>

  </div>
</template>

<script>
import { reactive } from 'vue';
export default {
  name: "articleSearch",
  data() {
    return {
      isKeySelected: {},
      form: reactive({
        title: null,
        flowerUserId: null,
        order: "ASC",
        column: "id",
      }),
      column: {},
    }
  },
  created() {
    this.isKeySelected = {
      title: false,
      flowerUserId: false,
    }
    this.column = [
      {
        value: "id",
        label: "ID"
      },
      {
        value: "title",
        label: "标题"
      },
      {
        value: "flowerUserId",
        label: "作者ID"
      },
      {
        value: "hit",
        label: "点击数"
      },
      {
        value: "commentNum",
        label: "评论数"
      },
      {
        value: "created",
        label: "创建日期"
      },
      {
        value: "modified",
        label: "修改日期"
      },
    ]
  },
  methods: {
    searchArticle() {
      this.$emit('queryEvent', this.form);
    },
    resettingSearch() {
      this.form = {
        title: null,
        flowerUserId: null,
        userName: null,
        order: "ASC",
        column: "id",
      };
      this.$emit('queryEvent', this.form);
    },
    handleChange(event, label) {
      if (!event) {
        switch (label) {
          case 'title':
            this.form.title = null;
            break;
          case 'flowerUserId':
            this.form.flowerUserId = null;
            break;
        }
      }
    }
  }
}
</script>

<style scoped>
.itemBox {
  width: 250px;
  margin-bottom: 20px;
}

.line {
  float: left;
  padding-left: 40px;
}

.column {
  margin-bottom: 20px;
}
</style>